<template>
	<view>
		<!-- 使用三元运算符判断是否显示内容或加载动画 -->
		<view v-if="answerContent" class="content">
			{{ answerContent }}
		</view>
		<view v-else class="loading-container">
			<!-- 这里放置加载动画的组件或图标 -->
			<view class="loading-circle"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 这里不需要定义answerContent，因为它是由computed属性提供的
			}
		},
		computed: {
			// 计算属性用于监听store中的getAnswerContent值
			answerContent() {
				return this.$store.getters.getAnswerContent;
			}
		},
		methods: {
			// 如果有其他方法，可以在这里定义
		}
	}
</script>

<style>
	/* 定义加载动画的样式 */
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100px; /* 根据需要调整 */
	}

	.loading-circle {
		border: 5px solid #f3f3f3; /* 灰色边框 */
		border-top: 5px solid #3498db; /* 蓝色顶部边框 */
		border-radius: 50%;
		width: 50px; /* 根据需要调整 */
		height: 50px; /* 根据需要调整 */
		animation: spin 2s linear infinite;
	}

	/* 定义旋转动画 */
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	/* 文本内容的样式 */
	.content {
		font-size: 16px; /* 设置字体大小 */
		line-height: 1.5; /* 设置行高 */
		color: #333; /* 设置字体颜色 */
		padding: 20px; /* 设置内边距 */
		text-align: justify; /* 设置文本对齐方式 */
	}
</style>
